<template>
    <section class="form-container">
        <div class="form-content">
            <el-tabs v-model="activeName">
                <el-tab-pane
                    v-for="(item,index) in configData"
                    :key="item.typeId"
                    :label="item.typeName"
                    :name="item.typeId"
                >
                    <el-form label-width="200px" size="small" label-position="left">
                        <el-form-item
                            v-for="(value,cIndex) in item.list"
                            :label="value.name"
                        >
                            <el-input v-if="value.inputType === 'string' || value.inputType === 'password'" v-model="value.value"/>
                            <el-upload
                                v-else-if="value.inputType ==='image'"
                                class="avatar-uploader"
                                :action="apiHost + '/file/upload'"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                :headers="headers"
                            >
                                <div v-if="value.value">
                                    <img :src="value.value" class="avatar"
                                         @click="setIndex(index,cIndex)">
                                </div>
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="setIndex(index,cIndex)"/>
                            </el-upload>

                            <div class="form-tips">{{ value.remark }}</div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>

            <el-popconfirm title="确定修改吗？" style="margin-left: 200px;" @onConfirm="submitForm(this)">
                <el-button slot="reference" type="primary">确定</el-button>
            </el-popconfirm>
        </div>
    </section>
</template>
<script>
import {ConfigApi} from '@/api/system/config'
import { getToken } from '@/utils/auth'

export default {
    name: 'SystemConfigList',
    components: {},
    data() {
        return {
            activeName: 'first',
            configData: [],
            index: 0,
            cIndex: 0,
            apiHost: process.env.VUE_APP_BASE_API,
            headers: { 'X-Token': getToken() }
        }
    },
    created() {
        this.getAllConfig()
    },
    methods: {
        // 获取列表
        getAllConfig() {
            const that = this
            ConfigApi.getAllConfig()
                .then((response) => {
                    response.forEach(item => {
                        item.typeId = item.typeId.toString()
                    })
                    that.configData = response
                    that.activeName = response[0].typeId
                }).catch((err) => {

            })
        },
        submitForm() {
            const that = this
            ConfigApi.updateConfig(that.configData)
                .then((response) => {
                }).catch((err) => {
            })
        },
        setIndex(index, cIndex) {
            this.index = index
            this.cIndex = cIndex
        },
        handleSuccess(e) {
            this.configData[this.index].list[this.cIndex].value = e.data
        }
    }
}

</script>

<style lang="scss">
</style>
